<template>
  <div class="notice-client-container">
    <!-- 标题 -->
    <div class="notice-header">
      <h1 class="notice-title">公告</h1>
    </div>

    <!-- 公告列表 -->
    <div class="notice-list">
      <div
          v-for="(notice, index) in noticeList"
          :key="notice.noticeId"
          class="notice-card"
          :class="getCardClass(index)"
          @click="showNoticeDetail(notice)"
      >
        <div class="card-content">
          <div class="notice-main">
            <div class="notice-title-text">{{ notice.title }}</div>
            <div class="notice-date">{{ parseTime(notice.createTime, '{y}-{m}-{d}') }}</div>
          </div>
          <div class="notice-tag" :class="getTagClass(notice.noticeType)">
            {{ getNoticeTypeText(notice.noticeType) }}
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="noticeList.length === 0" class="empty-state">
        <div class="empty-icon">📢</div>
        <div class="empty-text">暂无公告</div>
      </div>
    </div>

    <!-- 公告详情对话框 -->
    <el-dialog
        v-model="detailVisible"
        :title="currentNotice.title"
        width="600px"
        center
        class="notice-detail-dialog"
    >
      <div class="notice-detail">
        <div class="detail-meta">
          <span class="publish-time">
            <i class="el-icon-time"></i>
            发布时间：{{ parseTime(currentNotice.createTime, '{y}-{m}-{d} {h}:{i}') }}
          </span>
          <span class="notice-type" :class="getTagClass(currentNotice.noticeType)">
            {{ getNoticeTypeText(currentNotice.noticeType) }}
          </span>
        </div>
        <div class="detail-content">
          <div v-html="currentNotice.content" class="content-html"></div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="NoticeClient">
import { listClientNotice, getClientNotice } from "@/api/notice/noticeClient"
import { getCurrentInstance, ref, onMounted } from 'vue'

const { proxy } = getCurrentInstance()

const noticeList = ref([])
const detailVisible = ref(false)
const currentNotice = ref({})
const loading = ref(false)

/** 查询公告列表 */
function getList() {
  loading.value = true
  listClientNotice().then(response => {
    noticeList.value = response.data
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

/** 显示公告详情 */
function showNoticeDetail(notice) {
  currentNotice.value = notice
  detailVisible.value = true
}

/** 获取卡片样式类名 */
function getCardClass(index) {
  return index % 2 === 0 ? 'card-even' : 'card-odd'
}

/** 获取标签样式类名 */
function getTagClass(noticeType) {
  return noticeType === '1' ? 'tag-notice' : 'tag-announcement'
}

/** 获取公告类型文本 */
function getNoticeTypeText(noticeType) {
  const typeMap = {
    '1': '公告',
    '2': '通知'
  }
  return typeMap[noticeType] || '公告'
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.notice-client-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 80vh;
}

.notice-header {
  text-align: center;
  margin-bottom: 40px;
}

.notice-title {
  font-size: 28px;
  color: #409EFF;
  font-weight: 300;
  letter-spacing: 4px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 2px solid #f0f8ff;
  display: inline-block;
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notice-card {
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.notice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card-even {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}

.card-odd {
  background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: white;
}

.notice-main {
  flex: 1;
}

.notice-title-text {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.4;
}

.notice-date {
  font-size: 14px;
  opacity: 0.9;
}

.notice-tag {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.tag-notice {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.tag-announcement {
  background: rgba(103, 194, 58, 0.8);
  color: #fff;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
}

.notice-detail {
  padding: 0 10px;
}

.detail-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.publish-time {
  color: #909399;
  font-size: 14px;
}

.publish-time i {
  margin-right: 5px;
}

.detail-content {
  line-height: 1.8;
  min-height: 200px;
}

.content-html {
  word-wrap: break-word;
}

.content-html :deep(p) {
  margin-bottom: 1em;
}

.content-html :deep(img) {
  max-width: 100%;
  height: auto;
}

:deep(.notice-detail-dialog .el-dialog__header) {
  text-align: center;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

:deep(.notice-detail-dialog .el-dialog__title) {
  font-size: 20px;
  color: #303133;
}
</style>